<template>
  <div id="virtualCardList" class="virtualCardList same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
            <el-breadcrumb-item>特殊水卡</el-breadcrumb-item>
            <el-breadcrumb-item>特殊水卡列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">
            刷新
          </button>
          <button class="same-search-btns" @click="returnBack">返回</button>
        </div>
      </div>
      <div class="same-search-box">
        <div>
          <div class="same-search-left">
            <div class="same-left-one">
              <span class="same-search-span">水卡卡号:</span>
              <el-input size="medium" type="text" placeholder="请输入水卡卡号" style="width: 160px" v-model="virtualCard">
              </el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">用户信息:</span>
              <el-input size="medium" type="text" placeholder="请输入姓名/手机号码" style="width: 160px" v-model="user_keyword">
              </el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">园区名称:</span>
              <el-input size="medium" type="text" placeholder="请输入园区名称" style="width: 160px" v-model="village_name">
              </el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span same-search-fisrt">申请时间</span>
              <el-date-picker style="width: 140px" v-model="start_time" type="date" size="medium"
                value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
              <div class="same-interval">至</div>
              <el-date-picker style="width: 140px" v-model="end_time" type="date" size="medium"
                value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
            </div>
            <div class="same-left-one" v-if="!moveShow">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">
                更多查询条件<i :class="[
                    moveShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                  ]"></i>
              </div>
              <el-button type="primary" size="medium" @click="serach()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
        <!-- 搜索更多 -->
        <div>
          <div class="same-search-left new-sear-height" ref="leftHeight">
            <!-- <div class="same-left-one">
              <span class="same-search-span">水卡类型</span>
              <el-select size="medium" v-model="valuelei" placeholder="水卡类型" style="width: 140px">
                <el-option v-for="item in selectedlei" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div> -->
            <div class="same-left-one">
              <span class="same-search-span">水卡状态</span>
              <el-select size="medium" v-model="valueType" placeholder="水卡状态" style="width: 140px">
                <el-option v-for="item in selectedType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">余额段(元)</span>
              <el-input size="medium" type="Number" placeholder="请输入金额" style="width: 140px" v-model="start_money">
              </el-input>
              <div class="same-interval">至</div>
              <el-input size="medium" type="Number" placeholder="请输入金额" style="width: 140px" v-model="end_money">
              </el-input>
            </div>
            <div class="same-left-one" :class="[moveShow ? '' : 'new-sear-opacity']">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">
                收起更多查询条件<i :class="[
                    moveShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                  ]"></i>
              </div>
              <el-button type="primary" size="medium" @click="serach()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
      </div>
    </div>
    <div class="same-table-box">

      <div class="common-table-outer">
        <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
          :data="tableData" stripe>
          <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
          <el-table-column align="center" prop="id" label="姓名">
            <template slot-scope="scope">
              {{ scope.row.full_name || "——" }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="id" label="手机号码">
            <template slot-scope="scope">
              {{ scope.row.tel || "——" }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="card" label="水卡卡号">
          </el-table-column>

          <el-table-column align="center" prop="c_type" label="水卡类型">
          </el-table-column>


          <el-table-column align="center" prop="c_type" label="水卡状态">
            <template slot-scope="scope">
              <el-tag size="mini" type="success" v-if="scope.row.status == 1">正常</el-tag>
              <el-tag size="mini" type="warning" v-else-if="scope.row.status == 2">挂失</el-tag>
            </template>
          </el-table-column>


          <el-table-column align="center" prop="id" label="水卡余额">
            <template slot-scope="scope">
              {{ scope.row.balance | filterNumber }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="id" label="园区名称">
            <template slot-scope="scope">
              {{ scope.row.village_name || "——" }}
            </template>
          </el-table-column>


          <el-table-column align="center" prop="time" label="申请时间">
          </el-table-column>

          <el-table-column width="300" align="center" prop="id" label="操作">

            <template slot-scope="scope">
              <div class="water-list-btn-groups">
                <el-link class="custom-link" @click="details(scope.row.water_id)">详情</el-link>
                <el-link class="custom-link" @click="edit(scope.row.water_id)">编辑</el-link>
                <el-link v-if="scope.row.support_replace" class="custom-link" @click="jumpCard(scope.row.card)">补卡
                </el-link>

                <el-link v-if="scope.row.support_unbundling" class="custom-link" @click="unbundle(scope.row.real_card)">
                  解绑</el-link>
                <el-link v-if="
               scope.row.real_card != null &&
               scope.row.status == 1 &&
               scope.row.is_real_card == 2
             " class="custom-link" @click="bind(scope.row.real_card, scope.row.water_id)">挂失</el-link>

                <el-link class="custom-link" v-if="scope.row.real_card != null && scope.row.status == 2"
                  @click="unbind(scope.row.real_card, scope.row.water_id)">解挂</el-link>

                <el-dropdown>
                  <el-link class="custom-link">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-link>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <span @click="editShowBalance(scope.$index, scope.row.water_id,  scope.row.card)">修改余额</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="zeroBalance(scope.$index, scope.row.water_id, scope.row.card)">余额置零</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="handleCapitaRecords(scope.row.water_id)">资金记录</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="handleEditShow(scope.row.water_id)">消费记录</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="handleTopUp(scope.row.water_id)">操作记录</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="handleCapital(scope.row.water_id)">平账记录</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="syncCardBalance(scope.$index,scope.row.water_id,scope.row.card)">同步余额</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>



          <template slot="empty" v-if="isLoad">
            <div class="new-no-data-show">
              <img src="../../assets/images/no-data.png" alt="">
              <div>暂无相关数据</div>
            </div>
          </template>
        </el-table>

        <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
          <el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
            :page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
          </el-pagination>
        </div>
      </div>


      <el-dialog title="水卡余额修改" custom-class="common-custom-dialog alter-card-balance-width-500"
        :close-on-click-modal="false" :visible.sync="centerDialogVisible" width="30%" center>
        <div class="alter-balance-wrapper">
          <span>卡号：{{ card_num }}</span>
          <div class="step-number" style="margin-top: 10px">
            <el-input type="number" placeholder="水卡余额" name="recharge_number" v-model="recharge_number" />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="hideModel()">取 消</el-button>
          <el-button type="primary" @click="changeMoney">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import { regionDataPlus, CodeToText } from "element-china-area-data";
  export default {
    // 注入reload, AppVue中注册
    inject: ["reload"],
    name: "virtualCardList",
    data: function () {
      return {
        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,---------
        options: regionDataPlus,
        time: "",
        loading: true,
        address: [],
        selected: [
          {
            value: "选项1",
            label: "已领卡",
          },
          {
            value: "选项2",
            label: "2",
          },
          {
            value: "选项3",
            label: "3",
          },
        ],
        value: "",
        real_card: "",
        user_keyword: "",
        village_name: "",
        virtualCard: "", //电子卡
        entityCard: "", //实体卡
        selectedType: [
          {
            //水卡状态
            value: "1",
            label: "正常",
          },
          {
            value: "2",
            label: "挂失",
          },
        ],
        valueType: "", //水卡状态value
        valuelei: "", //水卡类型value
        selectedlei: [
          {
            //水卡类型
            value: "2",
            label: "普通卡",
          },
          {
            value: "1",
            label: "特殊卡",
          },
        ],
        valuebind: "", //是否绑定实体卡
        selectedbind: [
          {
            //绑定状态
            value: "1",
            label: "全部",
          },
          {
            value: "2",
            label: "已绑定",
          },
          {
            value: "3",
            label: "未绑定",
          },
        ],
        content: "SH12345",
        message: "", // 解绑--挂失--解除挂失--返回的提示内容
        isLoad: false, //是否请求接口
        start_money: "",
        end_money: "",
        centerDialogVisible: false,
        recharge_number: "",
        card_id: "",
        card_index: "",
        card_num: "",

        moveBtn: false, //是否暂时更多查询条件按钮按钮 搜索条件控制
        moveShow: false, //是否开启动画
        scrollHeight: "", //需要监听的高度

        start_time: "",
        end_time: "",
      };
    },
    // 初始化执行方法
    created: function () {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      var that = this;
      var pageSize = that.pageSize; // 每页显示条数
      that.waterCardList(1, pageSize); // 获取电子卡列表
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      //分页
      handleSizeChange(val) {
        var that = this;
        that.pageNo = 1;
        that.pageSize = val; // 当前每页显示条数
        that.waterCardList(that.pageNo, val); // 获取电子卡列表
      },
      // 当前页
      handleCurrentChange(val) {
        var that = this;
        that.pageNo = val;
        var pageSize = that.pageSize; // 每页条数
        that.waterCardList(val, pageSize); // 获取电子卡列表
      },
      // 搜索
      serach: function () {
        this.pageNo = 1;
        this.waterCardList(this.pageNo, this.pageSize, this.virtualCard);
      },
      // 消费记录
      handleEditShow(water_id) {
        this.$router.push({
          path: "/expenseCalendarF",
          query: { water_id: water_id },
        });
      },
      // 操作记录
      handleTopUp(id) {
        this.$router.push({
          path: "/operatingDataF?water_id=" + id,
        });
      },
      // 平账记录
      handleCapital(id) {
        this.$router.push({
          path: "/cardCapital?water_id=" + id,
        });
      },
      // 资金记录
      handleCapitaRecords(id) {
        this.$router.push({
          path: "/capitaRecords?water_id=" + id,
        });
      },

      //详情

      details(water_id) {
        this.$router.push({
          path: "/cardDetails?water_id=" + water_id,
        });
      },
      //补卡
      //跳转
      jumpCard(card) {
        this.$router.push({ path: "/supplementCard", query: { card: card } });
      },
      edit(id) {
        this.$router.push({ path: "/editaudit", query: { id: id } });
      },
      // 实体卡解绑
      unbundle(real_card) {
        var that = this;

        const h = this.$createElement;
        this.$msgbox({
          title: "是否对实体卡卡号为" + real_card + "进行解绑?",
          message: h(
            "p",
            { style: "color: red" },
            "解绑后实体卡将不能进行操作,(电子卡可正常使用)"
          ),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            // 确定
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              // Ajax请求
              that.$post({
                url: "Partner/WaterCard/unbind",
                data: { sn: real_card },
                success: (data) => {
                  if (data.code == 1000) {
                    that.reload();
                    that.message = data.message;
                  } else {
                    that.message = data.message;
                  }
                  done();
                  instance.confirmButtonLoading = false;
                  this.waterCardList(
                    this.pageNo,
                    this.pageSize,
                    this.virtualCard
                  );
                },
              });
            } else {
              done();
            }
          },
          // 取消
        }).then((action) => {
          this.$message({
            type: "info",
            message: that.message,
          });
        });
        // this.$confirm('挂失后实体卡将不能进行操作?(电子卡可正常使用)', '是否对实体卡-'+content+'-卡号进行挂失!', {
        //       confirmButtonText: '确认挂失',
        //       cancelButtonText: '容我想想',
        //       type: 'warning',
        //       center: true
        //     }).then(() => {
        //       this.$message({
        //         type: 'success',
        //         message: '删除成功!'
        //       });
        //     }).catch(() => {
        //       this.$message({
        //         type: 'info',
        //         message: '已取消删除'
        //       });
        //     });
        //			    this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
        //          				dangerouslyUseHTMLString: true,
        //          				confirmButtonText: '确认挂失',
        //		          		cancelButtonText: '容我想想',
        //        		});
      },
      // 实体卡挂失
      bind(real_card, water_id) {
        var that = this;
        const h = this.$createElement;
        this.$msgbox({
          title: "是否对实体卡卡号为" + real_card + "进行挂失?",
          message: h(
            "p",
            { style: "color: red" },
            "挂失后实体卡将不能进行操作,(电子卡可正常使用)"
          ),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            // 确认
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              // Ajax请求
              that.$post({
                url: "Partner/WaterCard/reportLoss",
                data: { id: water_id },
                success: (data) => {
                  if (data.code == 1000) {
                    that.message = data.message;
                  } else {
                    that.message = data.message;
                  }
                  done();
                  instance.confirmButtonLoading = false;
                  this.waterCardList(
                    this.pageNo,
                    this.pageSize,
                    this.virtualCard
                  );
                },
              });
            } else {
              done();
            }
          },
          // 取消
        }).then((action) => {
          this.$message({
            type: "info",
            message: that.message,
          });
        });
      },
      // 实体卡解除挂失
      unbind(real_card, water_id) {
        var that = this;
        const h = this.$createElement;
        this.$msgbox({
          title: "是否对实体卡卡号为" + real_card + "解除挂失?",
          message: h("p", { style: "color: red" }, "解除挂失后可正常使用"),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            // 确认
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              // Ajax请求
              that.$post({
                url: "Partner/WaterCard/unReportLoss",
                data: { id: water_id },
                success: (data) => {
                  if (data.code == 1000) {
                    that.message = data.message;
                  } else {
                    that.message = data.message;
                  }
                  done();
                  instance.confirmButtonLoading = false;
                  this.waterCardList(
                    this.pageNo,
                    this.pageSize,
                    this.virtualCard
                  );
                },
              });
            } else {
              done();
            }
          },
          // 取消
        }).then((action) => {
          this.$message({
            type: "info",
            message: that.message,
          });
        });
      },

      reset() {
        this.virtualCard = "";
        this.real_card = "";
        this.user_keyword = "";
        this.village_name = "";
        this.start_money = "";
        this.end_money = "";
        this.start_time = "";
        this.end_time = "";
        this.valueType = "";
        this.valuelei = "";
        this.waterCardList(1, this.pageSize);
      },

      // 获取电子卡列表
      waterCardList: function (page, pageSize, card = "") {
        var that = this;
        var real_card = that.real_card; //实体卡号
        var user_keyword = that.user_keyword;
        var village_name = that.village_name;
        var start_money = this.start_money;
        var end_money = this.end_money;
        if (Number(start_money) > Number(end_money)) {
          this.$message({
            type: "error",
            showClose: true,
            message: "开始金额不能大于结束金额",
            center: true,
          });
          return false;
        }
        that.loading = true; // 开启动画
        that.isLoad = false;
        that.$post({
          url: "Partner/WaterCard/waterCardList",
          data: {
            row: pageSize,
            page: page,
            card: card,
            real_card: real_card,
            user_keyword: user_keyword,
            village_name: village_name,
            start_money: start_money,
            end_money: end_money,
            start_time: that.start_time ? that.start_time : "",
            end_time: that.end_time ? that.end_time : "",
            card_status: that.valueType,
            is_special: 1,//只查询特殊水卡
          },
          success: (data) => {
            that.tableData = []; // 清空数据
            that.loading = false; //关闭动画
            that.isLoad = true;
            if (data.code == 1000) {
              that.tableData = data.data.data;
              that.totalDataNumber = Number(data.data.page.total_number); // 总的数据
            } else {
              this.$message({
                type: "error",
                showClose: true,
                message: data.message,
                center: true,
              });
            }
          },
        });
      },
      //新增同步余额
      syncCardBalance(index, id,card) {
        this.$confirm("确定要同步余额水卡：" + card+"", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$post({
            url: "Common/Card/syncCardBalance",
            data: {
              water_id: id,
            },
            success: (data) => {
              if (data.code == 1000) {
                 this.$message.success(data.message);
              } else {
                this.$message.error(data.message);
              }
            },
          });
        }).catch(() => {

        });
      },
      //余额置零
      zeroBalance(index, id, card) {
        this.$confirm("确定要置零水卡：" + card, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$post({
            url: "Partner/WaterCard/cardBalanceUpdate",
            data: {
              id: id,
              type: 2,
            },
            success: (data) => {
              if (data.code == 1000) {
                this.tableData[index].balance = 0;
              } else {
                this.$message.error(data.message);
              }
            },
          });
        }).catch(() => {

        });
      },
      //余额修改弹窗
      editShowBalance(index, id, card) {
        this.centerDialogVisible = true;
        this.card_id = id;
        this.card_index = index;
        this.card_num = card;
        this.recharge_number = this.tableData[index].balance;
      },
      hideModel() {
        this.centerDialogVisible = false;
        this.recharge_number = "";
        this.card_id = "";
        this.card_index = "";
        this.card_num = "";
      },
      //余额修改
      changeMoney() {
        this.$post({
          url: "Partner/WaterCard/cardBalanceUpdate",
          data: {
            id: this.card_id,
            type: 1,
            to_money: this.recharge_number,
          },
          success: (res) => {
            if (res.code == 1000) {
              this.centerDialogVisible = false;
              this.$message.success("金额修改成功");
              this.tableData[this.card_index].balance = this.recharge_number;
              this.recharge_number = "";
              this.card_id = "";
              this.card_index = "";
              this.card_num = "";
            } else {
              this.$message.error(res.message);
            }
          },
        });
      },
      //此处获取高度必须在dom元素创建完成之后才能获取
      gitHeight() {
         let clientHeight=this.$refs.leftHeight.clientHeight;
        let scrollHeight = this.$refs.leftHeight.scrollHeight;
        console.log('scrollHeight',scrollHeight)
        this.scrollHeight = scrollHeight<=53?53:scrollHeight; 
        scrollHeight <= 30 ? (this.moveBtn = false) : (this.moveBtn = true);
      },
      openMore() {
        this.moveShow = !this.moveShow;
        console.log('this.scrollHeight',this.scrollHeight)
        this.$refs.leftHeight.style.height = this.moveShow? this.scrollHeight + "px": 0 + "px";
        console.log('高度变化',this.$refs.leftHeight.style.height)
      },
    },
    mounted() {
      this.gitHeight();
      //监听高度变化
      var that = this;
      window.addEventListener("resize", function () {
        let scrollHeight =
          that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight
            ? that.$refs.leftHeight.scrollHeight
            : that.scrollHeight;
        that.scrollHeight = scrollHeight;
      });
    },
    watch: {
      // 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
      scrollHeight: function (val) {
        this.$refs.leftHeight.style.height = this.moveShow
          ? this.scrollHeight + "px"
          : 0 + "px";
      },
    },

    activated() {
      if (this.$route.meta.isUpdate) {
        this.tableData = [];
        this.waterCardList(this.pageNo, this.pageSize)
        this.$route.meta.isUpdate = false;
      }
    },

    beforeRouteEnter(to, from, next) {
      let updates = ["/editaudit"]
      if (updates.includes(from.path)) {
        to.meta.isUpdate = true;
      }
      next();
    },
    beforeRouteLeave(to, from, next) {
      let updates = ["/editaudit", "/cardDetails", "/capitaRecords", "/expenseCalendarF", "/operatingDataF", "/cardCapital"];
      if (!updates.includes(to.path)) {
        from.meta.keepAlive = false;
      } else {
        from.meta.keepAlive = true;
      }
      next();
    }
  };
</script>

<style>
  #virtualCardList {
    width: 100%;
    height: 100%;
    background: #ffffff;
  }

  #virtualCardList .lineBlock {
    text-align: center;
    color: #5c5c5c;
  }

  #virtualCardList .lineBlock:hover {
    background: #f5f7fa;
    color: #2c5586;
  }

  .el-popper {
    text-align: center;
    min-width: 100px;
    padding: 5px 0;
  }

  .el-popper .lineBlock {
    padding: 5px 0;
  }

  .el-popper .lineBlock:hover {
    background: #f5f7fa;
    color: #2c5586;
  }

  .alter-card-balance-width-500 {
    width: 500px !important;
  }
</style>

<style scoped>
  .alter-balance-wrapper {
    width: 350px;
    margin: 0 auto;
  }


  .water-list-btn-groups :nth-of-type(3) {
    margin-right: 0;

  }

  .water-list-btn-groups button:nth-child(-n+3) {
    margin-bottom: 10px;
  }

  .water-list-btn-groups :nth-of-type(4) {
    margin-left: 0;

  }
</style>